<template>
    <el-popover
    placement="bottom"
    title="标题"
    width="300"
    trigger="manual"
    class="emoji_root"
    v-model="visible">
    <el-row :gutter="20" v-for="(item) in Math.ceil(emojiList.length / 12)" :key="item.id">
      <el-col :span="2" v-for="(emoji) in emojiList.slice((item - 1) * 12, item * 12)" :key="emoji.id">
        <span class="emoji">{{ emoji }}</span>
      </el-col>
    </el-row>
    </el-popover>
</template>


<script>

import { list } from '@/api/tool/emoji'

export default {
  name: "Emoji",
  props: {

  },
  data() {
    return {
      emojiList: [],
      visible:true,
    };
  },
  mounted() {
    list().then(resp => {
      this.emojiList = resp.data
    })
  },
  methods: {
    hideEmoji() {
      this.visible = false
    }
  },
};
</script>

<style>
.emoji_root {
  width: 300px;
  height: 300px;
}
.emoji {
  cursor: pointer;
}
</style>
